<template>
  <div class="comment-container">
    <div class="user-comment-avatar">
      <el-avatar :src="getAvatarUrl(comment.userInfo?.avatar)" />
    </div>
    <div class="user-comment-box">
      <span>{{ comment.userInfo.nickName }}</span>
      <span v-if="comment.toCommentUserName" class="replay-user-comment-info-box">回复：<span
        class="replay-user-comment-info">@{{ comment.toCommentUserName }}</span></span>
      <div class="comment-inner">
        <span>{{ comment.comment }}</span>
      </div>
      <div class="comment-footer">
        <span>{{ comment.createTime }}</span>
        <el-button class="ml5" link @click="showCommentInput">回复</el-button>
      </div>
      <div v-if="comment.commentList" class="comment-reply-list">
        <div v-for="(item,index) in comment.commentList" :key="index">
          <CourseComment :comment="item" :relation-id="relationId" @replay-other-comment="replayOtherUser"
                         @show-parent-comment-input="showCommentInput" />
        </div>
      </div>
      <div v-if="comment.commentList && showCommentInputVisable" class="replay-other-comment-box">
        <el-input placeholder="请输入你的看法" v-model="data.comment" />
        <el-button v-if="data.comment" @click="replayOtherUser">发布评论</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import useUserStore from '@/store/modules/user.js'
import {  ref } from 'vue'

let emits = defineEmits(['replayOtherComment', 'showParentCommentInput'])
let showCommentInputVisable = ref(false)
let props = defineProps({
  comment: {
    type: Object,
    required: true
  },
  relationId: {
    type: String,
    required: true
  }
})
let userStore = useUserStore()
const data = ref({
  userId: userStore.id,
  courseTimeId: props.relationId,
  parentId: props.comment.id,
  comment: undefined,
  toCommentId: undefined
})

function getAvatarUrl(avatar) {
  return import.meta.env.VITE_APP_BASE_API + avatar
}

function showCommentInput(toCommentId) {
  data.value.comment = undefined;
  if (props.comment.commentList) {
    // data.value.toCommentId = undefined;
    showCommentInputVisable.value = !showCommentInputVisable.value
    if (typeof(toCommentId) === 'string'){
      data.value.toCommentId = toCommentId ? props.comment.id : toCommentId;
    }else {
      data.value.toCommentId = undefined;
    }
  } else {
    emits('showParentCommentInput',props.comment.id)
  }
}

function replayOtherUser() {
  if (data.value.comment.length > 0){
    emits('replayOtherComment', data.value)
    showCommentInputVisable.value = !showCommentInputVisable.value;
  }
}


</script>

<style scoped lang="scss">
.comment-container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 0.5em;
  margin: 0.5em;
}

.comment-inner {
  margin: 0.5em auto;
}

.comment-footer {
  color: #9499A0;
  font-size: 13px;
}

.comment-reply-list {
  border-bottom: 1px solid #DDD;
}

.replay-user-comment-info-box {
  margin-left: 0.5em;
}

.replay-user-comment-info {
  color: var(--el-color-primary);

}

.replay-other-comment-box {
  display: flex;
  margin: 0.3em auto;
}
</style>